<template>
    <div class="all">
        <div class="bread">首页>>站点设置>>菜单管理</div>
        <div class="nav">
            <!-- <div>
                <el-button disabled  type="primary"  plain @click="dialogVisible = true">添加加油记录</el-button> 
                <span>发布时间</span>
                <span>车型：    
                     <el-select v-model="value" placeholder="选择车型" style="width: 240px">
                       <el-option
                         v-for="item in options"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value"
                       />
                     </el-select>
                </span>
                <span>关键字<input></span>
                <span>搜索</span>
            </div> -->
        </div>
        <div class="content">
             <el-table
               :data="tableData"
               style="width: 100%; margin-bottom: 20px;height:calc(100% - 120px);"
               row-key="id"
               border
             >
             <el-table-column 
              v-for="item in colums"
              :prop="item.prop" 
              :label="item.label" 
              :key="item.prop"
              :formatter="item.formatter"
              :width="item.width"
              />
               <el-table-column fixed="right" label="操作" width="220">
                  <template #default="scope">
                      <el-button  type="primary" size="small"  @click="handleAddMenu(dialogFormRef, scope.row)">新增</el-button>
                      <el-button  type="warning" size="small"  @click="handleEdit(scope.row)">编辑</el-button>
                      <el-button  type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
                  </template> 
              </el-table-column>
             </el-table>

             <!-- <el-table
               :data="tableData1"
               style="width: 100%"
               row-key="id"
               border
               lazy
               :load="load"
               :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
             >
               <el-table-column prop="date" label="Date" />
               <el-table-column prop="name" label="Name" />
               <el-table-column prop="address" label="Address" />
             </el-table>             -->
        </div>
    </div>

    
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'


// const load = (row, treeNode, resolve) => {
//   setTimeout(() => {
//     resolve([
//       {
//         id: 31,
//         date: '2016-05-01',
//         name: 'wangxiaohu',
//         address: 'No. 189, Grove St, Los Angeles',
//       },
//       {
//         id: 32,
//         date: '2016-05-01',
//         name: 'wangxiaohu',
//         address: 'No. 189, Grove St, Los Angeles',
//       },
//     ]);
//   }, 1000);
// };


const colums = reactive([
      {label:"菜单名称", prop:"menuName"},
    //   {label:"图标", prop:"icon"},
      {
        label:"菜单类型", 
        prop:"menuType",
        formatter(row, column, value){
          return {
            1:"菜单",
            2:"按钮",
           }[value];
        }
    },
      {label:"权限标识", prop:"menuCode"},
      {label:"路由地址", prop:"path"},
      { 
        label:"菜单状态", 
        prop:"menuState",
        formatter(row, column, value){
          return {
            1:"正常",
            2:"禁用",
           }[value];
        }
      }
  ]);


const tableData = [

  {
    id: 1,
    menuName: '车辆管理',
    menuType: 1,
    path:'/cheliang',
    children: [
      {
        id: 10,
        menuName: '车辆列表',
        menuType: 1,
        path:'/carlist',
        children:[
          {
            id:101,
            menuName:'增加',
            menuType: 2,
          }
        ]
      },
      {
        id: 11,
        menuName: '出车记录',
        menuType: 1,
        path:'/chuche',
      },
      {
        id: 12,
        menuName: '加油记录',
        menuType: 1,
        path:'/jiayou',
      },
      {
        id: 13,
        menuName: '维修记录',
        menuType: 1,
        path:'/weixiu',
      },
      {
        id: 14,
        menuName: '违章记录',
        menuType: 1,
        path:'/weizhang',
      },
      {
        id: 15,
        menuName: '其他记录',
        menuType: 1,
        path:'/qita',
      },
      {
        id: 16,
        menuName: '年检记录',
        menuType: 1,
        path:'/nianjian',
      },
      {
        id: 17,
        menuName: '司机记录',
        menuType: 1,
        path:'/siji',
      },
    ],
  },
  {
    id: 2,
    menuName: '财务管理',
    children: [
      {
        id: 21,
        menuName: '订单管理',
      },
      {
        id: 22,
        menuName: '财务列表',
      }
    ],
  },
  {
    id: 3,
    menuName: '管理员管理',
    children: [
      {
        id: 21,
        menuName: '用户管理',
      },
      {
        id: 22,
        menuName: '角色管理',
      }
    ],
  },

];

const tableData1 = [
  {
    id: 1,
    date: '2016-05-02',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 2,
    date: '2016-05-04',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 3,
    date: '2016-05-01',
    name: 'wangxiaohu',
    hasChildren: true,
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 4,
    date: '2016-05-03',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
  },
];





</script>

<style lang="scss" scoped>
.all {
  background-color: #d6d6d6;
  height: 100%;
  overflow: hidden;
  padding-left: 10px;

  .bread {
    height: 30px;
    background-color: #fff;
    margin-bottom: 10px;
  }

  .nav {
    height: 40px;
    background-color: #fff;
    margin-bottom: 10px;
    padding: 5px;

    div {
      span {
        margin: 10px;
        line-height: 40px;
      }
    }
  }

  .content {
    background: #fff;
    height: 100%;
    padding: 5px;
    overflow: hidden;
  }
}
</style>